<template>
  <van-nav-bar title="分类" />

  <div style="display: flex">
    <van-sidebar v-model="active" @change="change">
      <van-sidebar-item title="推荐分类" />
      <van-sidebar-item title="全球奶粉" />
      <van-sidebar-item title="尿不湿" />
    </van-sidebar>

    <div style="flex: 1">123</div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  setup() {
    const active = ref(0);
    let type = 1;
    const change = (index) => {
      type = index + 1;
      getData(type);
    };

    const getData = (type) => {
      fetch("http://www.pudge.wang:4000/classify", {
        method: "post",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify({
          type: type,
        }),
      })
        .then((response) => response.json())
        .then((res) => {
          if (res.status === "0") {
            console.log(res);
          }
        });
    };

    onMounted(() => {
      getData(type);
    });

    return { active, change };
  },
};
</script>

<style lang="less" scoped></style>
